<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import { Dialog } from '@/components/Dialog'
import { computed } from 'vue'
import { ElButton } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStore } from '@/store/modules/user'
import { useStorage } from '@/hooks/web/useStorage'
import { lockScreenApi } from '@/api/system/user'
const { setStorage } = useStorage()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('lock-dialog')

const { t } = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean
  },
  lock: {
    type: Function,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    console.log('set: ', val)
    emit('update:modelValue', val)
  }
})

const dialogTitle = ref(t('lock.lockScreen'))
const userStore = useUserStore()
const handleLock = async () => {
  setStorage('isLock', true)
  const res = await lockScreenApi()
  if (res.code === 200) {
    dialogVisible.value = false
    if (props.lock) {
      props.lock()
    }
  }
}
</script>

<template>
  <Dialog
    v-model="dialogVisible"
    width="500px"
    max-height="170px"
    :class="prefixCls"
    :title="dialogTitle"
  >
    <div class="flex flex-col items-center">
      <img :src="userStore.getUserInfo?.avatar" alt="" class="w-70px h-70px rounded-[50%]" />
      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{
        userStore.getUserInfo?.userName
      }}</span>
    </div>
    <template #footer>
      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
    </template>
  </Dialog>
</template>

<style lang="less" scoped>
:global(.v-lock-dialog) {
  @media (max-width: 767px) {
    max-width: calc(100vw - 16px);
  }
}
</style>
